<template>
  <div class="login_contenter">
      <div class="login_box">
          <!-- 头像区 -->
          <div class="avatar_box">
              <img src="../assets/logo.png" alt="">
          </div>
          <!-- 表单区 -->
          <el-form  
                :rules="loginFormRules" 
                label-width="0px" 
                class="login_form" 
                :model="loginForm"
                ref="loginFormRef"
                >
            <!-- 用户名 -->
            <el-form-item prop="username">
                <el-input 
                    prefix-icon="el-icon-user" 
                    v-model="loginForm.username"
                    @keyup.enter.native="login"
                    ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
                <el-input 
                    prefix-icon="el-icon-lock" 
                    v-model="loginForm.password" 
                    type="password" @keyup.enter.native="login"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="resetloginForm">重置</el-button>
            </el-form-item>
          </el-form>

      </div>
  </div>
</template>

<script>
export default {
    name:'login',
    data(){
        return {
            loginForm:{
                username:'',
                password:'',
            }, // 登录表单数据绑定对象
            // 表单验证属性 通过 :rules绑定该属性，在里面写验证规则
            loginFormRules:{
                username:[
                // required 是否必填  messsage 提示消息， trigger 触发时机 这里是失去焦点时触发
                { required: true, message: '请输入用户名称', trigger: 'blur' },
                // min 最小 max最大  message提示消息
                { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password:[
               // required 是否必填  messsage 提示消息， trigger 触发时机 这里是失去焦点时触发
                { required: true, message: '请输入密码', trigger: 'blur' },
                // min 最小 max最大  message提示消息
                { min: 6, max: 15, message: '密码长度在 6 到 15 个字符', trigger: 'blur' }
                ]
    }
        }
    },
    methods:{
        // 重置表单方法
        resetloginForm(){
            this.$refs.loginFormRef.resetFields();
        },
        // 登录之前校验表单
        login(){
            // 通过调用表单内的validate函数来验证输入的用户名和密码是否合法，就是判断
            // 是否满足填写规则
            // 返回true或false
            // // 可以有两种写入方式
            // // 如果不填回调函数就会返回一个promise对象 也可以进行校验
            // this.$refs.loginFormRef.validate().then( async resolve=>{
            //     // 符合规定进行下一步发送请求 
            // },reject=>{
            //     // 不符合规定直接返回false
            //     return reject
            // })

            this.$refs.loginFormRef.validate( async valid=>{
                // console.log(valid); //直接返回 true 或false

                if (!valid) return false //校验错误直接返回false
                // 符合规定进行下一步发送请求
                // 如果返回的对象是promise那么可以用 async 和 await简化promise操作
                const {data:result} = await this.$http.post('login',this.loginForm)
                // 通过解构赋值来讲返回的data重命名为result 

                // 登录失败
                if(result.meta.status !==200) this.$message.error(`你的账号登录失败了，原因可能是${result.meta.msg}`)
                // 登录成功
                this.$message.success(result.meta.msg) 
                // 将token保存到客户端的sessionStorage中
                window.sessionStorage.setItem('token',result.data.token)
                // 跳转页面
                this.$router.push('/home')
            })




        }
    }

}
</script>

<style lang="less">
// 整个大盒子
 .login_contenter{
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #303133;
     height: 100%;
        // 登录盒子
     .login_box{
        display: flex;
        flex-direction: column;
        align-items: center;
         width: 450px;
         height: 300px;
         background-color: #fff;
         border-radius: 3px;
         //  logo的地方
          .avatar_box{
            position: relative;
            transform: translateY(-50%);
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            background-color: #fff;

            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
        // input 输入框
        .login_form{
            position: relative;
            width: 70%;
            padding: 10px;
            top: -50px;
        }
     }
 }
</style>